Showing posts with label web development. Show all posts
Showing posts with label web development. Show all posts

Monday, April 16, 2012

Twitter Bootstrap Typography tutorial

2 comments


Typography adalah seni tata tulis.
dalam bootstrap kita telah di berikan setingan untuk penulisan header, paragrap, list dan juga inline element.
typography tidaklah begitu sulit, saya cuma akan menerangkan saja supaya anda lebih mengetahui yang ada di dalam bootstrap ini.
klik link dibawah ini,






Disitu sudah lengkap sekali semua typography yang ada di bootstrap twitter, anda tinggal klik kanan dan view page source untuk melihat kode nya.

tapi semua yang ada di situ standar bawaan, kalo saya biasa menggunakan google web font untuk mempercantik halaman webnya, jika belum pernah mencoba, ini saya kasih link nya.. silahkan di coba. google.com/webfont

bingung cara make nya?
mudah kok, pilih pilih aja yang pengen kamu gunain..
jika sudah ketemu klik quick-use nanti akan muncul kode seperti ini.

---------------------------------------------------------
<link href='http://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet' type='text/css'>
---------------------------------------------------------
masukan link code tersebut di mana aja, tapi kalo saya biasanya malah di bawah sendiri supaya memperingan bukaan pertama sebuah web.

kalo sudah anda juga akan disuguhi nama font nya.
nah masukkan saja di mana akan anda gunakan, misal
---------------------------------------------------------
&lt;p style=&quot;font-family: 'Audiowide', cursive;&quot;&gt; font kata-kata ini akan berubah &lt;/p&gt;
---------------------------------------------------------

semoga bermanfaat, ^^
Read more »

Posted in: ,,,

Twitter Bootstrap Layout Tutorial

1 comment

Pada kesempatan ini saya akan memberikan tutorial tentang Layout.
Pada tutorial ini saya menggunakan bootstrap twitter v2.0.2 dimana bootstrap pada versi ini telah mendukung responsibilitas dengan device yang kita gunakan.
Responsibilitas yang dimaksud disini dimana nanti layout akan melebar dan menciut sesuai dengan lebar browser ponsel ataupun tablet, jika tablet landscape maka lebar otomatis akan mengikuti dengan sendirinya.
Sebagai contoh anda bisa membuka web toko online saya yang sekarang sedang dalam masa pembuatan. LifestyleJogja.com jika anda telah membukanya, coba saja anda lebar ciutkan browser anda, akan tampil berbeda bukan?

Langsung saja sekarang menuju notepad++

Oh iya, supaya anda tidak bingung akan saya beri sedikit trik dalam belajar bootstrap. Buka folder hasil download bootstrap, Anda akan menemukan folder Docs, nah buat document html atau php anda disitu. nanti untuk tag html css dan javascriptnya tinggal samakan aja dengan contoh yang ada, misal fluid.html . Jadi jika anda bingung anda tinggal membuka source html contoh yang dibawakan, buka contoh tersebut dengan notepad++ juga dan cari (ctrl+F) yang akan anda buat..
Mungkin cara dari saya seperti itu akan sangat membantu.. ^^

Oke, yg pertama..
Untuk membuat web layout fixed pixel gunakan tag seperti dibawah ini, lebarnya sudah diatur dengan class=container *(class ini ada di bootstrap.css) disini container lebarnya 940 pixel, bisa anda ubah nilainya tapi harus disesuaikan dengan class yang lain juga :p
-------------------------------------------------------
<body>
<div class="container">
...
</div>
</body>
-------------------------------------------------------

silahkan buka hero.html di folder example, buka dengan notepad++.
disitu anda akan menemukan beberapa class yang ada.

untuk membuat fluid layout, yaitu layout yang flexible kanan kirinya. dengan celah diantara keduanya yang juga bisa semakin besar dan kecil tergantung browser.
dan berikut scriptnya.
-------------------------------------------------------
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
</div>
<div class="span10">
<!--Body content-->
</div>
</div>
</div>
-------------------------------------------------------



lihat gambar tersebut, span2 dan span10 ada didalam class row fluid.
untuk membuat layout yang bersebelahan seperti itu anda tinggal masukkan div dengan ukuran berapa misal span2 span6 dan span2, asal jumlah jangan melebihi 12 karena ukurannya akan melebihi container nya itu sendiri.
anda bisa latihan mencoba-coba sendiri.

seperti biasa, tutorial selanjutnya akan saya sampaikan di postingan selanjutnya.
mungkin satu hari lagi.
Read more »

Posted in: ,,

Friday, April 13, 2012

Twitter Bootstrap Grid tutorial

2 comments

Ini adalah tutorial pertama dalam menggunakan bootstrap.
sebelum masuk ke dalam tutorial ada beberapa hal yang harus kita persiapkan terlebih dahulu.
yang pertama adalah.
source code bootstrap. bisa anda download di Sini
dan yang kedua untuk memudahkan kita dalam bermain bisa anda gunakakan dreamweaver atau notepad++
dalam hal ini saya lebih suka menggunakan notepad++ yang bisa anda download di SINI

baik, setelah kedua file tadi sudah siap maka kita mulai belajar tentang grid

oke langsung saja..

grid adalah pembagian wilayah dalam sebuah halaman web.
dalam hal ini bootstrap twitter membagi dalam 12 responsive grid.
kenapa ada kata responsive?
karena pada versi 2.0.2 ini grid akan menyesuaikan pada lebar ukuran device, apabila device lebih kecil grid juga akan mengikuti.

sebelum menulis code nya, jangan lupa bootstrap mengharuskan kita menulis dalam HTML5 doctype,
--------------------------------------------------
<!DOCTYPE html>
<html lang="en">
...
</html>
--------------------------------------------------

Dalam membuat grid kita hanya tinggal memanggil class yang telah ada di bootstrap,
supaya lebih jelas bisa langsung melihat besar kolom nya di docs nya..

untuk membuat satu kolom grid (single column grid) kita bisa mengisi penuh 12 grid yang ada. berikut syntax nya.

--------------------------------------------------
<div class="row"><br>
<div class="span12"><br>
inline elements like span, block level elements like p, div.<br>
</div>
--------------------------------------------------


untuk membuat dua kolom drid (two column grid) bisa kita bagi dua dari 12 kolom, yaitu 6 kolom 6 kolom, berikut syntax nya.

--------------------------------------------------
<div class="row"><br>
<div class="span6"><br>
inline elements like span, block level elements like p, div.<br>
</div><br>
<div class="span6"><br>
inline elements like span, block level elements like p, div.<br>
</div>
--------------------------------------------------

dan syntax umumnya untuk menciptakan grid itu adalah sebagai berikut,
--------------------------------------------------
<div class="row">
<div class="spanx">
inline elements like span, block level elements like p, div.
</div>>
repeat <div class="spanx"> y times.
--------------------------------------------------

Dimana y adalah jumlah kolom yang ingin anda buat dan x adalah 12 / y.
y dan x harus bilangan bulat positif, maka nilai harus 1 sampai 12.


tutorial bootstrap selanjutnya akan saya sampaikan di postingan selanjutnya.
Read more »

Posted in: ,

Cara Menggunakan Bootstrap Twitter Toolkit

1 comment

Bootstrap Twitter Toolkit,
Secara garis besar bootstrap ini adalah sebuah toolkit yang memudahkan kita untuk mendesign aplikasi web menggunakan css dan html.
Sebenarnya ada beberapa bootstrap yang beredar gratis di dunia internet, tetapi yang paling terkenal dan paling lengkap menurut saya yaitu bootstrap dari twitter, dan satu lagi yang membuat saya suka, bootstrap ini gratis. alias open source..
apalagi anda tau sendiri, tampilan web twitter baik itu mobile maupun tampilan dekstop, semuanya di buat menggunakan bootstrap ini.. sudah jaminan keren deh kalo anda bisa membuat web yang design nya mirip dengan twitter..

Sampai dengan tulisan ini di buat, bootstrap twitter sampai dengan versi 2.0.2,
Dengan bootstrap twitter kita akan lebih mudah dalam mendesign web kita tanpa perlu pusing-pusing yang berlebihan dengan hal css dan jquery, kita hanya perlu menyesuaikannya saja. dari sini sebagai programer web anda tidak perlu membuang-buang waktu untuk membuat tampilan yang menarik, karena soal tampilan kita tinggal comot satu persatu dari bootstrap ini.

Dalam twitter bootstrap v2.0.2 ini sudah sopport css3 dan html5 , dan banyak sekali plugin-pulgin di dalamnya yang bisa kita gunakan, antara lain

Grid, dalam bootstrap telah di buat 12 kolom grid yang fleksibel.
Layout, akan ada beberapa contoh sebagai patokan awal kita membuat layout.
Typography, Table, Form, Icon, Navigation termasuk juga pagination, Alert dan Error, Less, Javascript plugin yang di dalam nya ada plugin-plugin jquery yang sangat menarik.
Dan masih ada beberapa lagi yang sangat menarik,

untuk lebih jelasnya bisa anda lihat dan download langsung dari situs resminya http://twitter.github.com/bootstrap/

Untuk tutorial nya bisa anda lihat di postingan saya selanjutnya.
Selamat mencoba..
Read more »

Posted in: ,,,,,
Twitter Delicious Facebook Digg Stumbleupon Favorites More